<template>
  <div class="bus-index page">
    <div class="top">
      <keep-alive>
        <router-view :key="new Date().getTime()"></router-view>
      </keep-alive>
    </div>
    <div class="bottom border-top-1px">
      <div class="item" @click="turn(item)" v-for="(item,index) in items" :key="index">
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { LEVELS } from '@/const'
import { costSumCheck } from '@/api/apply'
export default {
  components: {},
  mounted () {
  },
  created () {
    // console.log(this.$route.query + '-->')
    // this.type = this.$route.query.type
    // this.$router.replace(this.items[0].path)
    costSumCheck().then(res => {
      this.count = res.data
    })
  },
  methods: {
    turn (item) {
      this.$router.replace({
        path: item.path
      })
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    }),
    items () {
      const list = [{
        name: '申请费用',
        path: '/apply/cost/apply'
      }, {
        name: '申请记录',
        path: '/apply/cost/list?top=0'
      }
      ]
      const li = {
        name: `申请审核(${this.count})`,
        path: '/apply/cost/list?top=1'
      }
      if (this.user.levelId > LEVELS.BUS) {
        list.push(li)
      }
      return list
    }
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

<style scoped lang="stylus">
.bus-index
  display flex
  padding 0 0
  flex-direction column

  .top
    position relative
    overflow hidden
    flex 1

  .bottom
    flex 0 0 44px
    height 44px
    display flex
    align-items center
    justify-content center
    border-color #B9B7C0

    .item
      height 100%
      flex 1
      display flex
      align-items center
      justify-content center
      color: #55545d;
      dpr-font(16Px)

</style>
